<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>原生打印功能实现</title>
  <style>
    /* 页面样式 */
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    h1 {
      color: #333;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }
    /* 打印专用样式 */
    @media print {
      body {
        font-size: 14px;
        line-height: 1.6;
      }
      h2 {
        color: #000;
      }
      ul {
        list-style: disc;
        padding-left: 20px;
      }
    }
  </style>
</head>
<body>
  <h1>原生打印功能实现</h1>
  <button id="printButton">点击打印</button>

  <!-- 在页面底部引用 JavaScript -->
  <script>
    // 定义打印功能
    function printContent() {
      // 动态生成打印内容
      const printHTML = `
        <h2>打印标题</h2>
        <p>这是通过原生 JavaScript 动态生成的打印内容。</p>
        <ul>
          <li>打印项 1</li>
          <li>打印项 2</li>
          <li>打印项 3</li>
        </ul>
      `;

      // 打开一个新的窗口
      const printWindow = window.open('', '_blank', 'width=800,height=600');
      if (!printWindow) {
        alert('浏览器拦截了弹出窗口，请允许弹窗后重试。');
        return;
      }

      // 写入打印内容和样式
      const documentContent = `
        <!DOCTYPE html>
        <html>
        <head>
          <title>打印预览</title>
          <style>
            body {
              font-family: Arial, sans-serif;
              line-height: 1.5;
              margin: 20px;
            }
            h2 {
              color: #333;
            }
            ul {
              list-style: disc;
              padding-left: 20px;
            }
          </style>
        </head>
        <body>
          ${printHTML}
        </body>
        </html>
      `;

      // 写入到新窗口的文档
      printWindow.document.open();
      printWindow.document.write(documentContent);
      printWindow.document.close();

      // 等待加载完成后触发打印
      printWindow.onload = function () {
        printWindow.print();
        printWindow.close();
      };
    }

    // 绑定打印按钮的点击事件
    document.getElementById('printButton').addEventListener('click', printContent);
  </script>
</body>
</html>
<!-- 关键步骤说明：
按钮点击绑定：

通过 document.getElementById('printButton').addEventListener('click', printContent); 绑定点击事件来调用 printContent 函数。
生成打印内容：

使用 printHTML 变量定义打印内容（通过模板字符串动态生成 HTML）。
打开打印窗口：

使用 window.open 打开一个新的窗口，在其中加载打印内容。
通过 printWindow.document.write() 将动态生成的 HTML 内容写入该新窗口。
打印并关闭窗口：

使用 printWindow.onload 监听窗口加载完成后，调用 printWindow.print() 来触发打印功能，打印后再关闭窗口。
样式和布局：

通过 @media print 定义打印样式，确保打印输出的格式和内容清晰。 -->